<template>
  <el-card>
    <template #header>
      <span class="font_bold fs_24">函数介绍</span>
    </template>
    formatDate 是一个灵活的日期格式化函数，能够将日期转换为指定格式的字符串。
    支持自定义格式模板，也可以直接获取时间戳。
    <h4>参数说明</h4>
    <p>
      <span class="code_block">dateTemplate</span> 格式模板，默认为 "YYYY-MM-DD
      hh:mm:ss"
    </p>
    <p>
      <span class="code_block">date</span>
      日期，可以是Date对象、时间戳或日期字符串，默认使用当前时间
    </p>
    <h4>返回值</h4>
    格式化后的日期字符串，或时间戳（当模板为"t"时）
  </el-card>
  <el-card class="mt_24">
    <template #header>
      <span class="font_bold fs_24">格式模板说明</span>
    </template>
    支持以下格式占位符，函数会将它们替换为相应的日期部分：
    <el-table border :data="templateList" class="mt_16">
      <el-table-column label="占位符" prop="seatFlag"></el-table-column>
      <el-table-column label="描述" prop="des"> </el-table-column>
      <el-table-column label="示例" prop="example"> </el-table-column>
    </el-table>
  </el-card>
  <el-card class="mt_24">
    <template #header>
      <span class="font_bold fs_24">交互演示</span>
    </template>
    <div>
      <div>
        <span class="fs_14">格式模板</span>
        <el-input
          v-model="formData.template"
          clearable
          placeholder="请输入"
        ></el-input>
      </div>
      <div class="mt_8">
        <span class="fs_14">日期值</span>
        <el-input
          v-model="formData.date"
          clearable
          placeholder="请输入"
        ></el-input>
      </div>
      <el-button
        class="mt_8"
        style="width: 100%"
        type="primary"
        @click="handleGetResDate"
        >格式化日期</el-button
      >
      <div class="mt_8">
        <span class="fs_14">最终结果</span>
        <el-input v-model="formData.resDate" disabled></el-input>
      </div>
      <div class="mt_8">
        <span class="fs_14">代码预览</span>
        <el-input
          :value="`formatDate('${formData.template}' ${formData.date && ','}${
            formData.date && `'${formData.date}'`
          })`"
          disabled
        ></el-input>
      </div>
    </div>
  </el-card>
  <el-card class="mt_24">
    <template #header>
      <span class="font_bold fs_24">函数源码</span>
    </template>
    <MarkdownBox :mdStr="mdStr"></MarkdownBox>
  </el-card>
</template>

<script setup>
import { reactive } from 'vue'
import { formatDate } from '../../utils/formatData'
const mdStr = `
\`\`\`js
const formatDate = (
  dateTemplate = "YYYY-MM-DD hh:mm:ss",
  date
) => {
  if (!date) {
    date = new Date();
  }
  // 中文星期映射表
  const WeekZhCnMap = {
    0: "日",
    1: "一",
    2: "二",
    3: "三",
    4: "四",
    5: "五",
    6: "六",
  };
  const QuarterZhCnMap = { 1: "一", 2: "二", 3: "三", 4: "四" }

  try {
    // 处理日期输入，转换为Date对象
    let targetDate;
    if (date instanceof Date) {
      targetDate = date;
    } else {
      targetDate = new Date(date);
    }

    // 检查日期有效性
    if (isNaN(targetDate.getTime())) {
      throw new Error("您传入的不是有效的日期格式！");
    }

    // 提取日期组件
    const year = targetDate.getFullYear();
    const month = targetDate.getMonth() + 1;
    const dateNum = targetDate.getDate();
    const hours = targetDate.getHours();
    const minutes = targetDate.getMinutes();
    const seconds = targetDate.getSeconds();
    const quarter = Math.floor(month / 3) + 1;
    const quarterZhCh = QuarterZhCnMap[quarter];
    const week = targetDate.getDay();
    const WeekZhCh = WeekZhCnMap[week];
    const stamp = targetDate.getTime();

    // 定义替换规则映射表
    const replacements = {
      YYYY: year,
      YY: String(year).slice(-2),
      MM: String(month).padStart(2, "0"),
      M: month,
      DD: String(dateNum).padStart(2, "0"),
      D: dateNum,
      hh: String(hours).padStart(2, "0"),
      h: hours,
      mm: String(minutes).padStart(2, "0"),
      m: minutes,
      ss: String(seconds).padStart(2, "0"),
      s: seconds,
      q: quarter, // 新增季度支持
      Q: quarterZhCh,
      w: week,
      W: WeekZhCh,
      t: stamp,
    };
    // 执行替换：根据映射表将模板中的占位符替换为实际值
    return Object.entries(replacements).reduce((str, [key, value]) => {
      return str.replace(new RegExp(key, "g"), value);
    }, dateTemplate);
  } catch (error) {
    console.error("日期格式化错误:", error.message);
    return '日期格式化错误: ' + error.message; // 明确返回null表示格式化失败
  }
};
\`\`\`
`
const templateList = [
  {
    seatFlag: 'YYYY',
    des: '四位年份',
    example: '2023',
  },
  {
    seatFlag: 'MM',
    des: '两位月份（补零）',
    example: '03, 12',
  },
  {
    seatFlag: 'M',
    des: '月份（不补零）',
    example: '3, 12',
  },
  {
    seatFlag: 'DD',
    des: '两位日期（补零）',
    example: '05, 28',
  },
  {
    seatFlag: 'D',
    des: '日期（不补零）',
    example: '5, 28',
  },
  {
    seatFlag: 'hh',
    des: '两位小时（24小时制，补零）',
    example: '09, 23',
  },
  {
    seatFlag: 'h',
    des: '小时（24小时制，不补零）',
    example: '9, 23',
  },
  {
    seatFlag: 'mm',
    des: '两位分钟（补零）',
    example: '07, 59',
  },
  {
    seatFlag: 'm',
    des: '分钟（不补零）',
    example: '7, 59',
  },
  {
    seatFlag: 'ss',
    des: '两位秒钟（补零）',
    example: '03, 55',
  },
  {
    seatFlag: 's',
    des: '秒钟（不补零）',
    example: '3, 55',
  },
  {
    seatFlag: 'w（小写）',
    des: '星期几',
    example: '0, 1, 2, 3, 4, 5, 6',
  },
  {
    seatFlag: 'W（大写）',
    des: '季度',
    example: '日，一, 二, 三, 四, 五, 六, 七',
  },
  {
    seatFlag: 'q（小写）',
    des: '季度',
    example: '1, 2, 3, 4',
  },
  {
    seatFlag: 'Q（大写）',
    des: '季度',
    example: '一, 二, 三, 四',
  },
  {
    seatFlag: 't',
    des: '时间戳（毫秒）',
    example: '1678900000000',
  },
]

const formData = reactive({
  template: 'YYYY年MM月DD日 hh时mm分ss秒 第Q季度 星期W 时间戳是t',
  date: '',
  resDate: '',
})

const handleGetResDate = () => {
  formData.resDate = formatDate(formData.template, formData.date)
}
</script>

<style lang="scss" scoped>
.disabled_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: ghostwhite;
  border-radius: 10px;
}
</style>
